<template>
    <div>
        <div class="start-address flex align-items-start space-between" v-if='sendAddress.id'>
            <img :src="startAddressIcon" alt="" class="left">
            <div class="right flex1 ">
                <div class="top flex align-items flex-start ell1">
                    <span class="name">{{ sendAddress.name }}</span>
                    <span class="phone">{{ sendAddress.phone }}</span>
                </div>
                <div class="address-txt flex align-items flex-start ell2">
                    <i class="iconfont iconlocation"></i>
                    <span class="atxt">{{ sendAddress.address }}{{ sendAddress.userSn }}</span>
                </div>
            </div>
        </div>
        <div class="start-address fn-ctr" v-else>
           <Loading />
        </div>
        <div class="end-address flex align-items space-between" v-if='acList.length == 0'  @click='isShow = true' >
            <img  :src="endAddressIcon" alt="" class="left">
            <div class="right flex1">
               <div class="noaddress">请选择收货地址</div>
            </div>
            <div class="chosemore fn-ctr">
                 <i class="iconfont iconarrow-right"></i>
            </div>
        </div>

        <div class="end-address flex align-items-start space-between" v-else  @click='isShow = true'>
            <img  :src="endAddressIcon" alt="" class="left">
            <div class="right flex1">
                <div class="top flex align-items flex-start ell1">
                    <span class="name">{{ endAddress.name }}</span>
                    <span class="phone">{{ endAddress.mobile }}</span>
                </div>
                <div class="address-txt flex align-items flex-start ell1">
                    <i class="iconfont iconlocation"></i>
                    <span class="atxt">{{ endAddress.address }}</span>
                    <Tag  plain type="primary" @click.stop='copyAddress(endAddress.address)'>复制</Tag>
                </div>  
            </div>
            <div class="chosemore fn-ctr">
                 <i class="iconfont iconarrow-right"></i>
            </div>
        </div>
        <ActionSheet v-model="isShow" title="选择地址">
            <div class="list">
                <RadioGroup v-model="radio" @change='radioChange'>
                    <div class="item fex1" style="width:100%">
                        <Radio :name="idx" v-for='(item,idx) in acList' :key='idx'><div class="flex1"> <Shippinginfo  :info='item' :mode='2'></Shippinginfo> </div></Radio>
                    </div>
                </RadioGroup>
            </div>
            <div class="btns">
                <Button type='info' block @click='addNewAddress'>新增收货地址</Button>
            </div>
        </ActionSheet>
    </div>
</template>

<script>
import { getSendCangku , addressList } from '@/model/api';
import startAddressIcon from '@/assets/address_start.png'
import endAddressIcon from '@/assets/address_end.png'
import { ActionSheet , RadioGroup, Radio , Button , Loading , Tag  } from 'vant';
import Shippinginfo from '@/components/Shippinginfo/Shippinginfo';
    export default {
        components:{Shippinginfo,ActionSheet,RadioGroup, Radio,Button,Loading,Tag},
        props:{
            defaultId:{
                type:[String,Number],
                default:"",
            }
        },
        data(){
            return {
                startAddressIcon,endAddressIcon,
                sendAddress:{},
                isShow:false,
                acList:[],
                radio:0,
            }
        },
        methods:{
            async getAddressList(){
                let {code ,data } = await addressList({start:0});
                if(code == 1){
                    this.acList = data;
                    let targetIdx = 0;
                    if(this.defaultId != ""){
                        targetIdx = data.findIndex(item => item.id == this.defaultId);
                    }else{
                        targetIdx = data.findIndex(item => item.is_def == 1);
                    }
                    this.radio = targetIdx == -1 ? 0 : targetIdx;
                    this.$nextTick(() => {
                        this.$emit('addressChange',this.endAddress)
                    })
                }
            },
            addNewAddress(){
                this.$router.push({
                    name: "myaddressadd",
                    query: {
                        mode: 1,
                    },
                })
            },
            radioChange(){
                this.isShow = false;
                this.$emit('addressChange',this.endAddress)
            },
            copyAddress(address){
                this.$copyText(address);
            }
        },
        async created(){
            let { code , data } = await getSendCangku();
            if(code == 1){
                this.sendAddress = data;
            }
            this.getAddressList();
        },
        computed:{
            endAddress(){
                if(this.acList.length == 0)return {};
                return this.acList[this.radio];
            }
        }
    }
</script>

<style lang="less" scoped>
    /deep/ .van-radio__label{
        display: block;
        width: 100%;
    }
    .list{
        width:100%;
        height:auto;
        .item{
            padding:0 14px;
        }
    }
    .start-address{
        width: 100%;
        padding: 11px 9px 14px; 
        background: #F7F7F7;
    }
    .end-address{
        width: 100%;
        padding: 11px 9px 14px; 
        background: #fff;
        .noaddress{
            font-size: 16px;
            color: #c2c2c2;
            position: relative;
            top: -2px;
        }
    }
    .left{
        width: 33px;
        height: 33px;
        margin: 0;
    }
    .right{
        overflow: hidden;
        .top{
            width: 100%;
            height: 33px;
            padding-bottom: 5px;
            .name{
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: bold;
                color: #333333;
                margin-right: 12px;
            }
            .phone{
                font-size: 12px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #333333;
            }
        }
        .address-txt{
            .iconfont{
                font-size: 12px;
                color: #999;
            }
            .atxt{
                font-size: 12px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #333333;
                margin-left: 5px;
                margin-right: 10px;
            }
        }
    }
    .chosemore{
        overflow:hidden;
        height: 50px;
        .iconfont{
            font-size: 14px;
            color: #CCCCCC;
        }
    }
    .btns{
        width: 100%;
        padding: 5px 14px;
    }
</style>